<template>
    <div>
        <div class="tips">
            v-cc-drag 接受表达式，一个 Object 或返回 Object 的函数 v-cc-drag="Object | Function"<br/>
            v-cc-drag 接受一个动态参数，可以禁止或允许拖动。v-cc-drag:[disabled]
        </div>
        <table>
            <caption>指令表达式 Object 参数属性</caption>
            <tr>
                <th>属性</th>
                <th>说明</th>
                <th>类型</th>
                <th>默认值</th>
                <th>可选值</th>
            </tr>
            <tr>
                <td>direction</td>
                <td>拖拽方向</td>
                <td>String</td>
                <td>'v'</td>
                <td>'v' 竖向, 'h' 横向, 'vh' 横竖向</td>
            </tr>
            <tr>
                <td>activeClass</td>
                <td>拖拽激活时的激活css类</td>
                <td>String</td>
                <td>''</td>
                <td>-</td>
            </tr>
            <tr>
                <td>offsetX</td>
                <td>横向偏移量</td>
                <td>Number</td>
                <td>0</td>
                <td>-</td>
            </tr>
            <tr>
                <td>offsetY</td>
                <td>竖向偏移量</td>
                <td>Number</td>
                <td>0</td>
                <td>-</td>
            </tr>
            <tr>
                <td>zIndex</td>
                <td>拖拽层的堆叠顺序</td>
                <td>Number</td>
                <td>9</td>
                <td>-</td>
            </tr>
            <tr>
                <td>static</td>
                <td>拖拽内容是否静态生成的。如果由 v-for 生成应该设置为 false， 否则设置为 true</td>
                <td>Boolean</td>
                <td>false</td>
                <td>-</td>
            </tr>
            <tr>
                <td>onChange</td>
                <td>位置交换成功后的回调函数。</td>
                <td>Function</td>
                <td>当 static 为 true 时，回调参数：tagIndex, srcIndex<BR/>当 static 为 false 时，回调参数：cb, tagIndex, srcIndex。<BR/>cb 为指令提供的数据交换函数，接受一个参数即 v-for 绑定的数据数组，并返回一个新的交换后的数据数组<BR/>tagIndex: 目标索引<BR/>srcIndex: 源索引</td>
                <td>-</td>
            </tr>
        </table>
        <div class="title">示例</div>
        <div class="desc">
            <highlightjs langauage="vue" :code="v3"></highlightjs>
        </div>
        <button @click="disabled=!disabled">{{disabled ? '允许拖拽' : '禁止拖拽'}}</button>
        <div class="desc">竖向</div>
        <div v-cc-drag:[disabled]="options" class="flex-v">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="desc">横向</div>
        <div v-cc-drag:[disabled]="options1" class="flex-h">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="desc">横竖向</div>
        <div v-cc-drag:[disabled]="options2" class="flex-vh">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>
        <div class="title">示例</div>
        <div class="desc">
            <highlightjs langauage="vue" :code="v4"></highlightjs>
        </div>
        <div class="tips">
            如果 v-for 生成的拖拽内容，设置 static 为 true, 回调函数的参数中就不会有数据交换函数参数。以下演示，如果不执行数据交换函数，会导致列表展示与数据不一致。
            <div><button @click="showList">显示数据</button></div>
        </div>
        <div v-cc-drag:[disabled]="options" class="flex-v">
            <div v-for="(k,i) in list" :key="i">{{k}}</div>
        </div>
        <div class="tips">
            在回调函数中调用数据交换函数后。
            <div><button @click="showList1">显示数据</button></div>
        </div>
        <div v-cc-drag:[disabled]="options5" class="flex-v">
            <div v-for="(k,i) in list1" :key="i">{{k}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ccDragDemo",
        methods: {
            showList() {
                alert(this.list);
            },
            showList1() {
                alert(this.list1);
            }
        },
        data() {
            return {
                disabled: false,
                list: [1, 2, 3, 4, 5],
                list1: [1, 2, 3, 4, 5],
                options5: {
                    direction: 'v',
                    activeClass: 'active',
                    offsetY: 5,
                    static: false,
                    onChange: (cb) => {
                        this.list1 = cb(this.list1);
                    }
                },
                options: {
                    direction: 'v',
                    activeClass: 'active',
                    offsetY: 5,
                    static: true,
                    onChange: () => {
                        //alert(this.list);
                    }
                },
                options1: {
                    direction: 'h',
                    activeClass: 'active',
                    offsetX: 5,
                    static: true
                },
                options2: {
                    direction: 'vh',
                    activeClass: 'active',
                    offsetX: 5,
                    offsetY: 5,
                    static: true
                },
                v3: `
                    //非v-for的拖拽内容示例
                    <div v-cc-drag:[disabled]="options" class="flex-v">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                    </div>

                    .active {background: #bbb;margin: 5px;}
                    .flex-v {display: flex; flex-direction: column;}
                    .flex-v > div {width: 200px;background: #eee;margin: 5px;}

                    new Vue({
                        data: {
                            disabled: false,
                            options: {
                                direction: 'v',
                                activeClass: 'active',
                                offsetY: 5,
                                static: true
                            }
                        }
                    });
                `,
                v4: `
                    //v-for的拖拽内容示例
                    <div v-cc-drag:[disabled]="options" class="flex-v">
                        <div v-for="(k,i) in list" :key="i">{{k}}</div>
                    </div>

                    .active {background: #bbb;margin: 5px;}
                    .flex-v {display: flex; flex-direction: column;}
                    .flex-v > div {width: 200px;background: #eee;margin: 5px;}

                    new Vue({
                        dat: {
                            list: [1, 2, 3, 4, 5],
                            options: {
                                disabled: false,
                                direction: 'v',
                                activeClass: 'active',
                                offsetY: 5,
                                static: false，  // 必须要设置为 false, 否则回调函数中没有数据交换函数
                                onChange: (cb) => {
                                    this.list = cb(this.list);  //要调用此方法，进行数据交换
                                }
                            }
                        }
                    });
                `
            }
        }
    }
</script>

<style scoped lang="scss">
    .active {background: #bbb; margin: 5px;}
    .flex-v {
        display: flex;
        flex-direction: column;
        > div {
            width: 200px;
            background: #eee;
            margin: 5px;
        }
    }
    .flex-h {
        display: flex;
        > div {
            width: 200px;
            background: #eee;
            margin: 5px;
        }
    }
    .flex-vh {
        display: flex;
        flex-wrap: wrap;
        > div {
            width: 300px;
            background: #eee;
            margin: 5px;
        }
    }
</style>